<template>
    <div class="wrap">
        <div class="container">
            <div class="position_block">
                <div class="my_car_text">购物车</div>
            </div>
            <div class="car_center_content">
                <div class="car_out_content">
                    <div class="car_head_th">
                        <div>商品信息</div>
                        <div>订单备注</div>
                        <div class="submenu">
                            <el-menu :default-active="activeIndex" class="el-menu-sccj" mode="horizontal" @select="handleSelect">
                                <el-submenu index="1">
                                    <template slot="title">生产厂家</template>
                                    <el-menu-item index="1-0">全部</el-menu-item>
                                    <el-menu-item :index="'1-' + item.id" v-for="(item, index) in factoryList" :key="index">{{ item.name }}</el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </div>
                        <div>单价</div>
                        <div>数量</div>
                        <div>小计</div>
                        <div>操作</div>
                    </div>
                    <div class="car_box">
                        <div class="car_list" v-for="(item, index) in data" :key="index" v-loading="item.loading">
                            <div class="car_goods_info">
                                <div class="checkbox" v-if="item.goods_type == '1'">
                                    <el-checkbox v-model="item.checked" @change="checkChange(item)"></el-checkbox>
                                </div>
                                <div class="checkbox" v-else>
                                    <el-tag size="mini" >下架</el-tag>
                                </div>
                                <div class="img-box">
                                    <img :src="$commonImageUrl(item.goods_image)">
                                </div>
                                <div class="goods_spec_info">
                                    <div class="goods_name">{{ item.goods_name }}</div>
                                    <div class="goods_gg">
                                        <p>型号：{{ item.goods_models }}</p>
                                        <p>规格：{{ item.sku_name }}</p>
                                        <p class="flex remark">备注：<span>{{ item.goods_remark }}</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="note">{{ item.order_remark }}</div>
                            <div class="note">{{ item.factory_name }}</div>
                            <div class="price">￥{{ item.goods_price }}</div>
                            <div class="car_num_operate">
                                <el-input-number v-model="item.goods_num" @change="handleChange(item)" :min="1" label="描述文字"></el-input-number>
                            </div>
                            <div class="list_count_price">￥{{ item.total_price }}</div>
                            <div class="car_delete">
                                <a @click="deleteGoods(item)"></a>
                            </div>
                        </div>
                    </div>
                    <!-- 全选 结算-->
                    <div class="car_operate_bottom" v-show="data.length > 0">
                        <div class="left_operate">
                            <label>
                                <el-checkbox v-model="allChecked" @change="allCheckedChange">全选</el-checkbox>
                            </label>
                            <div class="delete_div" @click="deleteBatchGoods">删除</div>
                            <div class="delete_div" @click="clearDownGoods">清除已下架商品</div>
                        </div>
                        <div>
                            <div>已选商品 {{ goodsNumber }} 件，合计（不含运费）：</div>
                            <div class="pay_price">{{ countAmount }}</div>
                            <div class="gopay">
                                <a @click="goConfirm">去结算</a>
                            </div>
                            <!-- <div class="gopay"><nuxt-link to="/memberCenter/confirm">去结算</nuxt-link></div> -->
                        </div>
                    </div>
                    <!-- 全选 结算 结束 -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/cart";
import factoryApi from "@/api/factory";
export default {
    data() {
        return {
            num: 1,
            activeIndex: "0",
            data: [],
            params: {
                factory_id: null
            },
            // 全选按钮状态
            allChecked: false,
            goodsNumber: 0,
            countAmount: 0,
            factoryList: [],
            activeIndex: "1-0"
        };
    },
    created() {
        this.LoadData();
        this.LoadFactoryPageList();
    },
    methods: {
        // 删除一个商品
        deleteGoods: function (item) {
            this.deleteCartGoods(item.id + "");  
        },
        // 删除多个商品
        deleteBatchGoods: function () {
            var ids = this.data.filter(x => x.checked).map(x => x.id).join(",");
            if (ids.length == 0) {
                this.$message.warning("请选择需要删除的商品");
                return;
            }
            this.deleteCartGoods(ids);
        },
        // 删除购物车商品
        deleteCartGoods: function (ids) {
            this.$confirm('此操作删除购物车产品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var input = {
                    ids: ids
                }
                api.DeleteCartGoods(input)
                    .then((res) => {
                        if (res.code == 1) {
                            this.$message.success("删除成功");
                            // this.LoadData();
                            console.log(ids);
                            ids.split(",").forEach(element => {
                                var index = this.data.findIndex(x => x.id == element);
                                // var index = this.form.sku.indexOf(item)
                                if (index !== -1) {
                                    this.data.splice(index, 1)
                                }
                                console.log(index);
                            })
                        }
                    }).catch(err => {

                    })
            }).catch(() => {
                
            })
        },
        // 全选按钮
        allCheckedChange: function (val) {
            this.data.forEach(element => {
                element.checked = val
            })
            this.sumTotal();
        },
        // 选择按钮
        checkChange: function (val) {
            if (this.data.filter(x => x.checked).length == this.data.length) {
                this.allChecked = true;
            } else {
                this.allChecked = false;
            }
            this.sumTotal();
        },
        // 计算金额/数量
        sumTotal: function () {
            var sumTotal = 0;
            var goodsNum = 0;
            this.data.forEach(element => {
                if (element.checked) {
                    goodsNum += element.goods_num
                    sumTotal += element.goods_num * element.goods_price
                }
            })
            this.goodsNumber = goodsNum;
            this.countAmount = sumTotal;
        },
        // 加载数据
        LoadData: function () {
            api.GetCartList(this.query)
                .then((res) => {
                    if (res.code == 1) {
                        this.data = [];
                        res.data.forEach(element => {
                            element.checked = false;
                            element.loading = false;
                            this.data.push(element);
                        })
                    }
                })
        },
        // 改变数量
        handleChange(item) {
            item.loading = true;
            var input = {
                id: item.id,
                goods_num: item.goods_num
            }
            api.CalcCartGoods(input)
                .then((res) => {
                    if (res.code == 1) {
                        this.sumTotal();
                        item.total_price = res.data.total_price;
                    }
                    item.loading = false;
                }).catch((err) => {
                    item.loading = false;
                })
        },
        // 选中菜单的回调
        handleSelect(index, indexPath){
            if (index == "1-0") {
                this.params.factory_id = null
            } else {
                this.params.factory_id = Number(index.split("-")[1])
            }
            this.LoadData();
        },
        // 加载生产厂家
        LoadFactoryPageList: function () {
            var _this = this;
            factoryApi.GetFactoryList({})
                .then((res) => {
                    _this.factoryList = res.data;
                })
        },
        clearDownGoods: function () {
            this.$confirm('是否清空购物车下架产品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.ClearCartDownGoods()
                    .then((res) => {
                        if (res.code == 1) {
                            this.$message.success("清空成功");
                            this.LoadData();
                        }
                    }).catch(err => {

                    })
            }).catch(() => {
                
            })
        },
        // 前往结算页面
        goConfirm: function () {
            var goods = this.data.filter(x => x.checked);
            if (goods.length == 0) {
                this.$message.warning("请选择需要结算的商品");
                return;
            }
            var input = {
                list: [],
                remark: "",
                cart_ids: goods.map(x => x.id).join(",")
            };
            goods.forEach(element => {
                input.list.push({
                    goods_id: element.goods_id,
                    goods_num: element.goods_num,
                    filings_sku_id: element.filings_sku_id,
                    remark: ""
                })
            })
            this.$router.push({path: '/memberCenter/confirm', query: { goods: btoa(JSON.stringify(input)) }})
        }
    },
    mounted: function(){

    }

};
</script>
<style>
.car_num_operate .el-input-number__decrease{
        left: 1px;
    border-radius: 4px 0 0 4px;
    border-right: none;
}
.car_num_operate .el-input-number{ 
    width: 120px;
}
.car_num_operate  .el-input-number .el-input__inner{
    border: none;
    padding-left: 30px;
    padding-right: 30px;
    height: 40px;
    line-height: 40px;
}
.el-input-number__decrease, .el-input-number__increase{
    position: absolute;
    z-index: 1;
    top: 1px;
    width: 40px;
    height: auto;
    text-align: center;
    background: transparent;
    color: #606266;
    cursor: pointer;
    font-size: 13px;
}
.car_num_operate .el-input-number__increase{
    border-left: none;
}

.el-menu--horizontal>.el-submenu .el-submenu__title{
    color: #333333;
    font-size: 0.16rem;
}
.el-menu--popup-bottom-start{
    margin-top: 0;
}
.el-menu--popup{
    border-radius: 5px;
    padding:10px 15px;
}
.el-menu--horizontal>.el-submenu:focus .el-submenu__title, .el-menu--horizontal>.el-submenu:hover .el-submenu__title,
.el-menu--horizontal>.el-submenu.is-opened .el-submenu__title, .el-menu--horizontal>.el-submenu.is-opened .el-submenu__title i,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
    color: #017CBA;
}
.el-menu.el-menu--horizontal,
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom: 0;
}
.el-dropdown-menu__item, .el-menu-item{
    font-size: 0.15rem;
}
.el-menu--horizontal>.el-submenu{
    float: none;
}
</style>